<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">订单详情管理</span>
    <el-button @click="goBack" type="primary" style="float:right;margin-top:13px;">返回</el-button>
  </div>
  <el-card style="margin:20px;">
    <div style="margin:10px 0 40px 10px;">
      订单详情列表
    </div>
    <el-table :data="orderManagement">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="dish" label="菜品名称" align="center"/>
      <el-table-column prop="cuisine" label="菜系" align="center"/>
      <el-table-column prop="number" label="数量" align="center" width="320"/>
      <el-table-column prop="price" label="单价" align="center"/>
    </el-table>
  </el-card>
</template>

<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

const goBack = ()=>{
  router.push('/orders');
}
//定义数组用来接收订单详情数据
const orderManagement =ref([]);
//http://localhost:9090/reservation?id=101
//获取在URL查询字符串的参数值,如上方URL中的字典id 101
const orderId = new URLSearchParams(window.location.search).get('id');
//定义一个方法用来通过订单id查询订单详情数据

const selectOrderManagement = ()=>{
  console.log("111:orderId="+orderId)
  axios.get(BASE_URL+'/v1/orderDetail/selectDish?id='+orderId).then((response)=>{
    if (response.data.code == 2000){
      console.log("response="+response.data.data)
      orderManagement.value = response.data.data;
      console.log(orderManagement.value)
    }else{
      ElMessage.error("如需刷新页面，请手动刷新请手动刷新！");
    }
  })
}
//定义页面一进来就刷新
onMounted(()=>{
  selectOrderManagement();
})
</script>

<style scoped>

</style>